<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>simpleSwitch演示</title>
    <link rel="stylesheet" type="text/css" href="css/jquery.simpleSwitch/jquery.simpleSwitch.css">
    <style type="text/css">
        /*CSS源代码*/
        body{
            background:#CFCFCF;
        }

        #tool-map {
            max-width: 980px;
            text-align: center;
            margin: 20px auto;
        }

        h1 #tool-map {
            margin-bottom: 20px;
        }

        #tool-map #geocoding_form {
            margin: 40px auto 40px;
        }

        #tool-map .input-group {
            margin-left: 4%;
        }

        #tool-map .find-me.btn:focus {
            border-color: transparent;
            outline: 0;
        }

        #tool-map .coordinates {
            font-size: 18px;
            opacity: 0;
            margin-bottom: 40px;
            color: white;
        }

        #tool-map .no-browser-support {
            font-size: 18px;
            opacity: 0;
        }

        #tool-map .coordinates b:first-child {
            margin-right: 15px;
        }

        #tool-map .visible {
            opacity: 1;
        }

        #tool-map .map-overlay {
            max-width: 600px;
            height: 400px;
            margin: 0 auto;
            background-color: #fff;
            position: relative;
            border-radius: 2px;
        }

        #tool-map #map {
            max-width: 550px;
            height: 400px;
            margin: 0 auto;
        }

    </style>
    <script type="text/javascript">
        /*Javascript代码片段*/
        $(function () {
            var findMeButton = $('.find-me');

            // 检查浏览器是否支持Geolocation API
            if (!navigator.geolocation) {
                findMeButton.addClass("disabled");
                $('.no-browser-support').addClass("visible");
            } else {
                findMeButton.on('click', function (e) {
                    navigator.geolocation.getCurrentPosition(function (position) {
                        // 获取当前位置的经纬度
                        var lat = position.coords.latitude;
                        var lng = position.coords.longitude;

                        $('.latitude').text(lat.toFixed(3));
                        $('.longitude').text(lng.toFixed(3));
                        $('.coordinates').addClass('visible');

                        // 创建一个新的地图并标出当前位置
                        var myLatlng = new sogou.maps.LatLng(lat, lng);
                        var myOptions = {
                            'zoom': 17,
                            'center': myLatlng,
                            'mapTypeId': sogou.maps.MapTypeId.ROADMAP
                        };
                        var map = new sogou.maps.Map(document.getElementById("map"), myOptions);

                        var image = new sogou.maps.MarkerImage('http://api.go2map.com/maps/images/v2.0/flag.png',
                                // 标记图标宽20像素，高32像素
                                new sogou.maps.Size(20, 32),
                                // 原点在图片左上角，设为(0,0)
                                new sogou.maps.Point(0, 0),
                                // 锚点在小旗的旗杆脚上，相对图标左上角位置为(0,32)
                                new sogou.maps.Point(0, 32),
                                // 如果是合并的图片，必须设置此项，指定图片大小
                                // 如果是一张图片一个图标，此项可缺省。
                                new sogou.maps.Size(20, 32));
                        var shadow = new sogou.maps.MarkerImage('http://api.go2map.com/maps/images/v2.0/flag_shadow.png',
                                //阴影图标宽高
                                new sogou.maps.Size(37, 32), new sogou.maps.Point(0, 0), new sogou.maps.Point(0, 32));
                        /*************************************
                         *  MarkerShape  对象规范 示例         *
                         *************************************/
                                //shape定义点击的图标区域
                                //图片即使透明也是矩形的
                                //设置shape后，可以看到鼠标放在旗杆旁的右侧是不变小手的
                        var shape = {
                                    coord: [1, 1, 1, 20, 18, 20, 18, 1],
                                    type: 'poly'
                                };
                        /*************************************
                         *      MarkerOptions 对象规范 示例    *
                         *************************************/
                        var markerOptions = {
                            //设置是否在鼠标悬停时显示Label
                            disableLabel: false,
                            //如果为 true，则可拖动标记。默认值为 false。
                            draggable: true,
                            //前景的默认图标 icon和icons使用其中一个即可
                            //如果同时存在，优先使用icons
                            //取值类型 String|MarkerImage|MarkerStyle
                            //可以是一个图片地址，也可以是MarkerImage或者MarkerStyle对象
                            icon: image,
                            //0 前景的默认图标，1 前景鼠标悬停时的图标
                            //icons:[],
                            //Marker的编号标识。
                            id: "ID00001",
                            //设置Label对象的参数。
                            //设置成初始即可见，相对于Marker居下对齐，
                            label: { visible: true, align: "BOTTOM" },
                            //显示标记的地图。
                            map: map,
                            //标记位置。必填。
                            position: myLatlng,
                            //阴影图像。shadow和shadows使用其中一个即可
                            //如果同时存在，优先使用shadows
                            //取值类型 String|MarkerImage|MarkerStyle
                            //可以是一个图片地址，也可以是MarkerImage或者MarkerStyle对象
                            shadow: shadow,
                            //0 阴影默认图像，1 阴影鼠标悬停时图像。
                            //shadows:[],
                            //用于拖动/点击的图像地图区域定义。
                            shape: shape,
                            //Label文本或者鼠标悬停时显示的tip。
                            title: "小旗可以拖动哦",
                            //如果为 true，则显示标记。默认为true
                            visible: true,
                            //叠加顺序
                            zIndex: 0
                        };
                        var marker = new sogou.maps.Marker(markerOptions);
                    }, function (err) {
                        return console.error(err);
                    });
                });
            }
        });
    </script>
</head>
<!-- HTML代码片段中请勿添加<body>标签 //-->
<div class="container" id="tool-map">

    <h1>Geolocation示例程序</h1>

    <form id="geocoding_form" class="form-horizontal">
        <div class="form-group">
            <div class="col-xs-12 col-md-6 col-md-offset-3">
                <button type="button" class="find-me btn btn-info btn-block">点我看地图</button>
            </div>
        </div>
    </form>

    <p class="no-browser-support">抱歉你的浏览器不支持Geolocation</p>
    <p class="coordinates">经度: <b class="latitude">42</b> 纬度: <b class="longitude">32</b></p>

    <div class="map-overlay">
        <div id="map"></div>
    </div>



    <!-- 推荐开源CDN来选取需引用的外部JS //-->
    <script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://api.go2map.com/maps/js/api_v2.5.1.js"></script>
    </div>
</html>